<template>
  <div class="attend_detail">
    <div class="attend_detail_left" :class="{ full_width: detailInfo.isSave === '0' }">
      <div class="info_detail_title">
        <span class="title_name">{{ detailInfo.title }}</span>
      </div>
      <div class="right_box">
        <div class="attend_main">
          <div class="attendance_add_infor1">
            <p>
              <span>部门名称：</span>
              <span>{{ detailInfo.orgName }}</span>
            </p>
            <p>
              <span>申请人：</span>
              <span>{{ detailInfo.createBy }}</span>
            </p>
            <p>
              <span>总人数：</span>
              <span>{{ detailInfo.headCount }}</span>
            </p>
          </div>
          <div class="table_con" ref="table_con">
            <div class="log_add_tab" :class="{ is_edit: isEdit && (isNormalRole || isOtherRole || isOrgRole) }">
              <el-form :model="formData" ref="ruleForm">
                <!-- stripe -->
                <el-table
                  :data="formData.tableData"
                  border
                  style="width: 100%"
                  :header-cell-class-name="headerStyle"
                  :row-class-name="rowClass"
                  :header-cell-style="headerCellStyle"
                  height="100%"
                  row-key="detailId"
                  ref="formTable">
                  <el-table-column label="物品名称" align="center" width="170" fixed="left">
                    <template slot-scope="scope">
                      <div
                        class="cell_show"
                        v-if="
                          !scope.row.isEdit || (isApplyRole && scope.row.createBy && userId !== scope.row.createBy)
                        ">
                        {{ scope.row.name }}
                      </div>
                      <el-form-item v-else :prop="'tableData.' + scope.$index + '.name'" :rules="moduleListRules.name">
                        <el-select
                          v-model="scope.row.name"
                          placeholder="请选择"
                          size="medium"
                          @change="changeOrg2($event, scope.$index)"
                          popper-class="my_select"
                          ref="mySelect"
                          @focus="focusName($event, scope.$index)">
                          <el-option
                            v-for="item in chooseList"
                            :key="item.typeId"
                            :label="item.name"
                            :value="item.name"></el-option>
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格" align="center" width="150">
                    <template slot-scope="scope">
                      <div
                        class="cell_show"
                        v-if="
                          !scope.row.isEdit || (isApplyRole && scope.row.createBy && userId !== scope.row.createBy)
                        ">
                        {{ scope.row.specs }}
                      </div>
                      <el-form-item v-else>
                        <el-input
                          v-model="scope.row.specs"
                          size="medium"
                          filterable
                          clearable
                          placeholder="请选择物品名称"
                          disabled></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="申请数量" align="center" width="120">
                    <template slot-scope="scope">
                      <div class="cell_show" v-if="!scope.row.isEdit || isApplyRole">
                        {{ scope.row.applyNumber }}
                      </div>
                      <el-form-item
                        v-else
                        :prop="'tableData.' + scope.$index + '.applyNumber'"
                        :rules="moduleListRules.applyNumber">
                        <el-input
                          v-model="scope.row.applyNumber"
                          size="medium"
                          filterable
                          clearable
                          placeholder="请输入"
                          type="number"
                          @blur="selectBlur($event, scope.$index)"
                          class="size_input"
                          maxlength="4"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="实际领取数量"
                    align="center"
                    width="120"
                    v-if="isApplyRole && firstType === '1'">
                    <template slot-scope="scope">
                      <div class="cell_show" v-if="!scope.row.isEdit">
                        {{ scope.row.realityNumber }}
                      </div>
                      <el-form-item
                        v-else
                        :prop="'tableData.' + scope.$index + '.realityNumber'"
                        :rules="moduleListRules.realityNumber">
                        <el-input
                          v-model="scope.row.realityNumber"
                          size="medium"
                          filterable
                          clearable
                          placeholder="请输入"
                          type="number"
                          @blur="selectBlurs($event, scope.$index)"
                          class="size_input"
                          maxlength="4"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <template
                    v-if="
                      isApplyRole &&
                      !isEdit &&
                      formData.tableData.length &&
                      formData.tableData[0].historyList &&
                      formData.tableData[0].historyList.length
                    ">
                    <el-table-column
                      label="往期记录(月份/数量)"
                      align="center"
                      :key="'item' + index"
                      v-for="(item, index) in 6"
                      width="120">
                      <template slot-scope="scope">
                        <div class="record-box">
                          <div class="top">
                            {{ scope.row.historyList[index] ? scope.row.historyList[index].historyMonth + '月' : '' }}
                          </div>
                          <div class="bottom">
                            {{
                              scope.row.historyList[index]
                                ? scope.row.historyList[index].historyQuantity + scope.row.specs
                                : ''
                            }}
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="备注" align="center" min-width="200">
                      <template slot-scope="scope">
                        <div class="cell_show" v-if="!scope.row.isEdit || isApplyRole">
                          {{ scope.row.remark }}
                        </div>
                        <el-form-item
                          v-else
                          :prop="'tableData.' + scope.$index + '.remark'"
                          :rules="moduleListRules.remark">
                          <el-input
                            v-model="scope.row.remark"
                            size="medium"
                            filterable
                            clearable
                            placeholder="请输入"
                            @blur="selectBlurr($event, scope.$index)"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                  </template>
                  <template v-else>
                    <el-table-column label="备注" align="center" min-width="200">
                      <template slot-scope="scope">
                        <div class="cell_show" v-if="!scope.row.isEdit || isApplyRole">
                          {{ scope.row.remark }}
                        </div>
                        <el-form-item
                          v-else
                          :prop="'tableData.' + scope.$index + '.remark'"
                          :rules="moduleListRules.remark">
                          <el-input
                            v-model="scope.row.remark"
                            size="medium"
                            filterable
                            clearable
                            placeholder="请输入"
                            @blur="selectBlurr($event, scope.$index)"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                  </template>

                  <el-table-column
                    prop="czpt"
                    label="操作"
                    align="center"
                    width="100"
                    fixed="right"
                    v-if="isEdit && (isNormalRole || isOtherRole || isOrgRole)"
                    key="operate">
                    <template slot-scope="scope">
                      <div class="cell_show" v-if="scope.row.typeId">
                        <!-- <a v-if="!scope.row.isEdit" class="tableButton" href="javascript:;" @click="editRow(scope.row, scope.$index)"
                          ><i class="el-icon-edit-outline"></i> 编辑</a
                        > -->
                        <!-- <a v-else class="tableButton" href="javascript:;" @click="saveRow2(scope.row, scope.$index)"
                          ><i class="el-icon-document-checked"></i> 保存</a
                        > -->
                        <a
                          class="tableButton m-l-10"
                          href="javascript:;"
                          @click="delGood(scope.row, scope.$index)"
                          v-if="formData.tableData.length > 1 && (isNormalRole || isOtherRole || isOrgRole)">
                          <i class="el-icon-delete"></i>
                          删除
                        </a>
                        <a
                          class="tableButton m-l-10"
                          href="javascript:;"
                          @click="delGood(scope.row, scope.$index)"
                          v-if="
                            formData.tableData.length > 1 &&
                            isApplyRole &&
                            (scope.row.createBy === userId || !scope.row.createBy)
                          ">
                          <i class="el-icon-delete"></i>
                          删除
                        </a>
                      </div>
                      <div v-else>
                        <!-- <a class="tableButton" href="javascript:;" @click="saveRow2(scope.row, scope.$index)"><i class="el-icon-document-checked"></i> 保存</a> -->
                        <a class="tableButton m-l-10" href="javascript:;" @click="delRowTwo(scope.$index)">
                          <i class="el-icon-circle-close"></i>
                          取消
                        </a>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </div>
            <div class="log_btn_add" @click="addRowsTwo" v-if="isEdit && (isNormalRole || isOtherRole || isOrgRole)">
              <span class="el-icon-plus color_blue">增加一条</span>
            </div>
          </div>
          <div class="add_annex">
            <div class="annex_name">附件：</div>
            <div class="annex_list">
              <UploadPreview
                :file-list="formData.enclosureList"
                layout="list"
                v-if="!isEdit || isApplyRole"></UploadPreview>

              <UploadFile :file-list="formData.enclosureList" v-else></UploadFile>
            </div>
          </div>
        </div>
        <div
          class="btn_check"
          v-if="detailInfo.isSave === '0' && (isOrgRole || isOtherRole || isNormalRole) && firstType === '0'">
          <el-button size="small" v-if="!isEdit" @click="edit">编 辑</el-button>
          <el-button size="small" v-if="isEdit" @click="saveData('0')">保 存</el-button>
          <el-button size="small" type="primary" @click="saveData('1')">提 交</el-button>
          <el-button size="small" type="danger" @click="delForm">删 除</el-button>
        </div>
        <div
          class="btn_check"
          v-else-if="isOrgRole && detail.status === '0' && firstType !== '0' && detailInfo.flowNode === '1'">
          <el-button size="small" v-if="!isEdit" @click="goEdit">编 辑</el-button>
          <el-button size="small" v-if="isEdit" @click="saveData('1')">保 存</el-button>
          <el-button size="small" type="primary" @click="approvalData('1')">通 过</el-button>
          <el-button size="small" type="danger" @click="approvalData('2')">不通过</el-button>
        </div>
        <div
          class="btn_check"
          v-else-if="isApplyRole && detail.status === '0' && firstType !== '0' && detailInfo.flowNode === '2'">
          <el-button size="small" v-if="!isEdit" type="primary" @click="goEdit">修 改</el-button>
          <el-button size="small" v-if="isEdit" type="primary" @click="saveData('1')">保 存</el-button>
        </div>
      </div>
    </div>
    <div class="attend_detail_r" v-if="detailInfo.isSave === '1'">
      <div class="add_r_title">审批流程</div>
      <logisticsSteps ref="refsFlow" :activeInfo="detail" />
    </div>
  </div>
</template>

<script>
import logisticsSteps from './logisticsSteps'
import UploadPreview from '@com/UploadPreview/index.vue'
import UploadFile from '@com/UploadFile'
import {
  getLogicticsInfoDetail,
  delLogicticsInfo,
  updateLogicticsInfo,
  approveForm,
  exportLogicticsInfo,
} from '@apis/api-dailyManage.js'
import moment from 'moment'
import { cloneDeep } from 'lodash'
import { mapGetters } from 'vuex'
export default {
  components: {
    logisticsSteps,
    UploadPreview,
    UploadFile,
  },
  props: {
    activeInfo: {
      type: Object,
      default: () => {},
    },
    firstType: {
      type: String,
      default: '',
    },
  },
  data() {
    const validName = (rule, value, callback) => {
      if (!value && (this.isNormalRole || this.isOrgRole || this.isOtherRole)) {
        callback(new Error('必选项'))
      } else {
        callback()
      }
    }
    return {
      moment: moment,
      load: false,
      detail: {},
      detailInfo: {},
      isEdit: false,
      formData: {
        enclosureList: [],
        tableData: [],
      },
      moduleListRules: {
        typeId: [{ required: true, validator: validName, trigger: 'change' }],
        name: [{ required: true, validator: validName, trigger: 'change' }],
        applyNumber: [{ required: true, validator: validName, trigger: 'change' }],
      },
      editsNum: 0,
      thingList: [],
      chooseList: [],
      isEditFlag: false, // 单条编辑
      activeEditInfo: {}, // 单条编辑内容
      historyList: [],
      userId: localStorage.pskh_userId,
      activeRow: {},
    }
  },
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isOrgRole', 'isApplyRole']),
  },
  watch: {
    activeInfo: {
      handler(news) {
        this.isEdit = false
        this.detail = news
        if (news.id) {
          this.getLogicticsInfoDetail()
        }
      },
      deep: true,
      immediate: true,
    },
    formData: {
      handler(news) {
        if (this.isApplyRole) {
          return
        }
        const arr = this.thingList.filter(itemA => {
          return news.tableData.every(itemB => {
            return itemB.typeId !== itemA.typeId
          })
        })
        if (this.isEditFlag) {
          arr.unshift(this.activeEditInfo)
        }
        this.chooseList = arr
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getLogicticsInfoDetail() {
      getLogicticsInfoDetail({
        id: this.detail.id,
      }).then(res => {
        if (res.code === 0) {
          this.detailInfo = res.data
          this.thingList = JSON.parse(JSON.stringify(this.detailInfo.itemTypeList)) || []
          this.formData.tableData = this.detailInfo.detailList
          this.formData.enclosureList = this.detailInfo.enclosureList
          if (this.isApplyRole) {
            const arr = JSON.parse(JSON.stringify(this.detailInfo.detailList))
            arr.sort((a, b) => {
              return (b.historyList && b.historyList.length) || 0 - (a.historyList && a.historyList.length) || 0
            })
            this.historyList = arr[0].historyList || []
          }
          // setTimeout(() => {
          //   this.$forceUpdate()
          //   this.$refs.formTable.doLayout()
          // }, 200)
          this.$nextTick(() => {
            this.$refs.formTable.doLayout()
          })
        }
      })
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    changeOrg2(name, index, type) {
      const arr = this.thingList.filter(li => {
        return li.name === name
      })
      const item = arr[0]
      this.$set(this.formData.tableData[index], 'detailId', item.detailId || '')
      this.$set(this.formData.tableData[index], 'typeId', item.typeId)
      this.$set(this.formData.tableData[index], 'name', item.name)
      this.$set(this.formData.tableData[index], 'specs', item.specs)
      this.$set(this.formData.tableData[index], 'defaultQty', item.defaultQty || 0)
      this.$set(this.formData.tableData[index], 'applyNumber', item.defaultQty || 0)
      this.$set(this.formData.tableData[index], 'realityNumber', item.defaultQty || 0)
      this.$set(this.formData.tableData[index], 'remark', item.remark)
      this.$set(this.formData.tableData[index], 'isEdit', true)
    },
    selectBlur(e, index) {
      this.formData.tableData[index].applyNumber = Number(e.target.value)
      this.formData.tableData[index].realityNumber = Number(e.target.value)
    },
    selectBlurs(e, index) {
      this.formData.tableData[index].realityNumber = Number(e.target.value)
    },
    selectBlurr(e, index) {
      this.formData.tableData[index].remark = e.target.value
    },
    /* 编辑功能 */
    editRow(item, index, type) {
      if (this.editsNum > 0) {
        this.$alert('您有暂未保存的内容，请先保存或者取消。', '提示', {
          confirmButtonText: '确定',
        })
        return false
      }
      this.isEditFlag = true
      this.activeEditInfo = item
      this.calEditsNum(1)
      this.$set(this.formData.tableData[index], 'isEdit', true)
    },
    saveRow2(item, index) {
      if (!item.typeId || !Number(item.applyNumber)) {
        return this.$message.warning('请确认信息填写完整')
      }
      this.$set(this.formData.tableData[index], 'isEdit', false)
      this.isEditFlag = false
      this.calEditsNum(-1)
    },
    delGood(item, index) {
      if (this.editsNum > 0) {
        this.$alert('您有暂未保存的内容，请先保存或者取消。', '提示', {
          confirmButtonText: '确定',
        })
        return false
      }
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message.success('删除成功')
          this.formData.tableData.splice(index, 1)
          this.calEditsNum(-1)
        })
        .catch(() => {})
    },
    delRowTwo(index) {
      this.formData.tableData.splice(index, 1)
      this.calEditsNum(-1)
    },
    // 计算编辑状态数量
    calEditsNum(num) {
      this.editsNum = this.editsNum + num
    },
    addRowsTwo() {
      if (this.editsNum > 0) {
        this.$alert('您有暂未保存的内容，请先保存或者取消。', '提示', {
          confirmButtonText: '确定',
        })
        return false
      }
      this.formData.tableData.push({
        name: '',
        typeId: '',
        defaultQty: '',
        applyNumber: '',
        realityNumber: 0,
        specs: '',
        isEdit: true,
      })
      // this.calEditsNum(1)
    },
    delForm() {
      this.$confirm('确定删除该领用单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delLogicticsInfo({
          id: this.detail.id,
        })
          .then(res => {
            if (res.code === 0) {
              this.$message.success('删除成功')
              this.$emit('operate')
            }
          })
          .catch(() => {})
      })
    },
    saveData(type) {
      let dataList = []
      if (this.isOrgRole || this.isNormalRole || this.isOtherRole) {
        if (type === '0') {
          const arr = this.formData.tableData.filter(item => {
            return !item.name
          })
          if (arr.length === this.formData.tableData.length) {
            this.$alert('请至少选择一种办公用品', '提示', {
              confirmButtonText: '确定',
            })
            return false
          }
          dataList = this.formData.tableData.filter(item => {
            return item.name
          })
        } else {
          const arr = this.formData.tableData.filter(item => {
            return !item.name || !Number(item.applyNumber)
          })
          if (arr.length > 0) {
            this.$alert('您有尚未填写完整的内容，请先完成或者取消。', '提示', {
              confirmButtonText: '确定',
            })
            return false
          }
          dataList = this.formData.tableData
        }
        dataList.forEach(item => {
          this.$set(item, 'isEdit', false)
        })
      }
      // if (this.editsNum > 0) {
      //   this.$alert('您有暂未保存的内容，请先保存或者取消。', '提示', {
      //     confirmButtonText: '确定',
      //   })
      //   return false
      // }
      if (this.isApplyRole) {
        const arr1 = this.formData.tableData.filter(item => {
          return (this.userId === item.createBy || !item.createBy) && (!item.name || !Number(item.applyNumber))
        })
        if (arr1.length > 0) {
          this.$alert('您有暂未完成的内容，请先将条目填写完整。', '提示', {
            confirmButtonText: '确定',
          })
          return false
        }
        const arr = this.formData.tableData.filter(item => {
          return item.applyNumber === ''
        })
        if (arr.length > 0) {
          this.$alert('您有暂未完成的内容，请先将条目填写完整。', '提示', {
            confirmButtonText: '确定',
          })
          return false
        }
        this.formData.tableData.forEach(item => {
          this.$set(item, 'isEdit', false)
        })
        dataList = this.formData.tableData
      }
      if (this.isApplyRole) {
        const arr = this.formData.tableData.filter(item => {
          return item.realityNumber === ''
        })
        if (arr.length > 0) {
          this.$alert('您有暂未完成的内容，请先将条目填写完整。', '提示', {
            confirmButtonText: '确定',
          })
          return false
        }
        this.formData.tableData.forEach(item => {
          this.$set(item, 'isEdit', false)
        })
        dataList = this.formData.tableData
      }
      this.isEdit = false
      dataList.forEach((item, index) => {
        this.$set(item, 'sort', index + 1)
      })
      const param = {
        applyType: this.detailInfo.applyType,
        enclosureList: this.formData.enclosureList,
        headCount: this.detailInfo.headCount,
        itemTypeList: dataList,
        orgName: this.detailInfo.orgName,
        orgId: this.detailInfo.orgId,
        year: this.detailInfo.year,
        month: this.detailInfo.month,
        title: this.detailInfo.title,
        isSave: type,
        id: this.detailInfo.id,
      }
      this.formData.tableData = dataList
      updateLogicticsInfo(param).then(res => {
        if (res.code === 0) {
          if (type === '0') {
            this.$message.success('暂存成功')
            this.getLogicticsInfoDetail()
          } else {
            if (this.firstType === '0') {
              this.$message.success('提交成功')
              this.$emit('addSuccess', 'detail')
            } else {
              this.$message.success('保存成功')
              this.getLogicticsInfoDetail()
            }
          }
        }
      })
    },
    approvalData(type) {
      if (this.isOrgRole) {
        const arr = this.formData.tableData.filter(item => {
          return !item.name || !Number(item.applyNumber)
        })
        if (arr.length > 0) {
          this.$alert('您有尚未填写完整的内容，请先完成或者取消。', '提示', {
            confirmButtonText: '确定',
          })
          return false
        }
      }
      if (this.isApplyRole) {
        const arr1 = this.formData.tableData.filter(item => {
          return (this.userId === item.createBy || !item.createBy) && (!item.name || !Number(item.applyNumber))
        })
        if (arr1.length > 0) {
          this.$alert('您有暂未完成的内容，请先将条目填写完整。', '提示', {
            confirmButtonText: '确定',
          })
          return false
        }
        const arr = this.formData.tableData.filter(item => {
          return item.applyNumber === ''
        })
        if (arr.length > 0) {
          this.$alert('您有暂未完成的内容，请先将条目填写完整。', '提示', {
            confirmButtonText: '确定',
          })
          return false
        }
        // this.formData.tableData.forEach(item => {
        //   this.$set(item, 'isEdit', false)
        // })
      }
      this.formData.tableData.forEach(item => {
        this.$set(item, 'isEdit', false)
      })
      this.formData.tableData.forEach((item, index) => {
        this.$set(item, 'sort', index + 1)
      })
      if (this.isEdit) {
        this.isEdit = false
        const param = {
          applyType: this.detailInfo.applyType,
          enclosureList: this.formData.enclosureList,
          headCount: this.detailInfo.headCount,
          itemTypeList: this.formData.tableData,
          orgName: this.detailInfo.orgName,
          orgId: this.detailInfo.orgId,
          year: this.detailInfo.year,
          month: this.detailInfo.month,
          title: this.detailInfo.title,
          isSave: type,
          id: this.detailInfo.id,
        }
        updateLogicticsInfo(param).then(res => {
          if (res.code === 0) {
            const params = {
              content: '',
              id: this.detail.id,
              processInstanceId: this.detail.processInstanceId,
              status: type,
              taskId: this.detail.taskId,
            }
            approveForm(params).then(res => {
              if (res.code === 0) {
                this.$message.success('审批成功')
                this.$emit('addSuccess', 'detail')
              }
            })
          }
        })
      } else {
        this.isEdit = false
        const param = {
          content: '',
          id: this.detail.id,
          processInstanceId: this.detail.processInstanceId,
          status: type,
          taskId: this.detail.taskId,
        }
        approveForm(param).then(res => {
          if (res.code === 0) {
            this.$message.success('审批成功')
            this.$emit('addSuccess', 'detail')
          }
        })
      }
    },
    goEdit() {
      this.isEdit = true
      this.formData.tableData.forEach(item => {
        this.$set(item, 'isEdit', true)
      })
    },
    edit() {
      this.formData.tableData.forEach(item => {
        this.$set(item, 'isEdit', true)
      })
      this.isEdit = true
    },
    exportData() {
      const req = `?id=${this.detail.id}`
      const link = document.createElement('a')
      link.target = 'targetName'
      link.href = exportLogicticsInfo(req)
      link.click()
      link.remove()
    },
    /* 合并表头最后两项 */
    headerCellStyle({ row, columnIndex }) {
      if (this.isApplyRole && !this.isEdit && this.historyList.length) {
        row[3].colSpan = 6
        if ([4, 5, 6, 7, 8].includes(columnIndex)) {
          return 'display: none'
        }
      }
    },
    focusName(name, index, type) {
      this.activeRow = this.formData.tableData[index]
      const arr = cloneDeep(this.thingList)
      this.formData.tableData.forEach(item => {
        const idx = arr.findIndex(li => {
          return li.typeId === item.typeId
        })
        arr.splice(idx, 1)
      })
      if (this.isEdit && this.activeInfo.typeId) {
        const li = arr.filter(item => {
          return item.typeId === this.activeInfo.typeId
        })
        if (li.length > 0) {
          arr.unshift(this.activeInfo)
        }
      }
      this.chooseList = arr
    },
  },
}
</script>

<style lang="scss" scoped>
.attend_detail {
  height: 100%;
  font-size: 16px;
  display: flex;
  .attend_detail_left {
    height: 100%;
    width: calc(100% - 300px);
  }
  .full_width {
    width: 100% !important;
  }
  .attend_detail_r {
    flex: 1;
    width: 300px;
    height: 99%;
    padding: 10px;
    border-left: 1px solid #ececec;
    overflow-y: auto;
    margin-bottom: 10px;
    min-height: 380px;
    .add_r_title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
  .info_detail_title {
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    font-size: 20px;
    padding-left: 20px;
  }
  .right_box {
    height: calc(100% - 60px);
    width: 100%;
    .attend_main {
      width: 100%;
      padding: 0 20px;
      height: calc(100% - 50px);
      margin: 0 auto;
      overflow-y: auto;
    }
    .item_select_tips {
      margin-bottom: 10px;
      padding-left: 10px;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      border-left: 3px solid #a40002;
      line-height: 22px;
    }
    .attendance_add_infor1 {
      display: flex;
      margin-bottom: 10px;
      justify-content: space-between;
      p {
        display: flex;
        align-items: center;
        span:nth-child(1) {
          word-break: keep-all;
          display: inline-block;
          // width: 120px;
          // text-align: right;
        }
        span:nth-child(2) {
          color: #909399;
          display: inline-block;
          word-break: break-all;
          // width: calc(100% - 120px);
        }
      }
      div {
        width: 100%;
        display: flex;
        // align-items: center;
        span:nth-child(1) {
          display: inline-block;
          word-break: keep-all;
          // width: 120px;
          // text-align: right;
        }
        span:nth-child(2) {
          color: #909399;
          display: inline-block;
          word-break: break-all;
          // width: calc(100% - 120px);
          // text-align: left;
        }
      }
    }
    .table_con {
      height: calc(100% - 100px);
      .el-select {
        width: 100%;
      }
      /deep/.el-input__inner {
        background: #f5f6fa;
        border: none;
        border-radius: 0;
        width: 100%;
      }
      /deep/.el-textarea__inner {
        background: #f5f6fa;
        border: none;
        border-radius: 0;
        width: 100%;
      }
      /deep/.el-date-editor {
        width: 100%;
      }
      /deep/ .el-select-dropdown__item {
        padding: 0 10px;
      }
      /deep/.el-form {
        height: 100%;
      }
      /deep/ .el-form-item {
        padding: 2.5px 0;
        background: #f5f6fa;
        margin: 2px;
      }
      /deep/.el-form-item__content {
        background: #f5f6fa;
      }
      /deep/ .el-form-item__error {
        margin-top: -15px;
        margin-left: 15px;
      }
      .tableButton {
        color: #333;
        i {
          color: #2261b9;
          font-size: 14px;
        }
      }
      .log_btn_add {
        height: 45px;
        line-height: 45px;
        text-align: center;
        border: 1px dashed #dcdfe6;
        margin: 10px 0;
        cursor: pointer;
        &:hover {
          box-shadow: 2px 4px 12px 1px rgba(0, 0, 0, 0.4);
        }
        .color_blue {
          color: #4b79bb;
          font-weight: 600;
          font-size: 14px;
          &:not(:first-child) {
            margin-left: 40px;
          }
        }
      }
      .log_add_tab {
        padding-top: 10px;
        height: 100%;
      }
      .is_edit {
        height: calc(100% - 50px);
      }
    }
    .add_annex {
      display: flex;
      .annex_name {
        padding: 9px 0;
      }
      .annex_list {
        flex: 1;
        padding: 9px 0;
        /deep/.noData {
          font-size: 16px;
        }
      }
    }
    .btn_check {
      margin-top: 10px;
      margin-right: 10px;
      text-align: right;
    }
  }
  /deep/.el-table td,
  /deep/.el-table th.is-leaf,
  /deep/.el-table--border,
  /deep/.el-table--group {
    border-color: #d9dee4;
  }
  /deep/.el-table--border {
    border-left: 1px solid #d9dee4;
    border-right: 1px solid #d9dee4;
  }
  /deep/.headerStyle {
    background: #e7eff2;
    border-top: 1px solid #d9dee4;

    .cell {
      color: #333333;
      font-size: 14px;
      visibility: visible !important;
      p {
        font-size: 14px;
      }
    }
  }
  /deep/.rowClass {
    td {
      padding: 0;
      position: relative;
    }
    .cell {
      color: #333;
      font-size: 14px;
      padding: 0 !important;
      // height: 50px;
      .cell_show {
        padding: 12px 5px;
      }
      div,
      span,
      p {
        font-size: 14px;
      }
    }
  }
  .size_input {
    ::-webkit-outer-spin-button,
    ::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }

    input[type='number']::-webkit-outer-spin-button,
    input[type='number']::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }
  }
  .record-box {
    height: 100%;
    .top,
    .bottom {
      // height: 25px;
      min-height: 50%;
    }
    .top {
      color: #3863a3;
    }
    .bottom {
      border-top: 1px solid #d9dee4;
    }
  }
}
</style>
